<template>
    <el-main style="padding: 0px 20px">
      <el-row style="margin:20px 0px">
        <my-Search :searchWay="true" :inputPlaceholder="'场馆名称'" @onSearch="getFieldSearchContent"></my-Search>
        <my-Search :searchWay="true" :inputPlaceholder="'订单号'" @onSearch="getSearchContent"></my-Search>
        <el-date-picker
          v-model="choiceDateTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="预约进场开始日期"
          end-placeholder="预约进场结束日期"
          :default-time="['00:00:00', '23:59:59']"
          align="right"
          @blur="choiceDate"
          @change="choiceDate"
          >
        </el-date-picker>
        <el-button icon="el-icon-refresh-left" style="margin-left:10px" type="primary" @click="getAllFieldBook">刷新</el-button>
        <el-button v-if="currentRow" icon="el-icon-document-copy" style="margin-left:10px" type="primary" @click="copyOrderNo(currentRow.no,$event)">复制订单号</el-button>
        <el-button v-if="currentRow&&currentRow.status==1" icon="el-icon-full-screen" style="margin-left:10px" type="primary" @click="codeDialogVisible=true">入场码</el-button>
        <el-button v-if="currentRow&&currentRow.status==0" type="success" icon="el-icon-wallet"  @click="giveOrdersInfo" >支付订单</el-button>
        <el-button v-if="currentRow&&currentRow.status==1||currentRow&&currentRow.status==0" type="danger" icon="el-icon-close"  @click="cancelBook" >取消预约</el-button>
      </el-row>

      <el-table
        :height="tableHeight"
        :data="fieldBookData"
        ref="fieldBookTableRef"
        row-key="id"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
      <!-- @cell-click="showCode" -->
        <el-table-column width="180px" prop="name" align="center" label="预约场馆"></el-table-column>
        <el-table-column width="100px" prop="bookCost" align="center" label="预约花费">
          <template slot-scope="scope">
            {{scope.row.bookCost | showCost}}
          </template>
        </el-table-column>
        <el-table-column prop="remark" align="center" label="预约备注" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.remark||'无'}}
          </template>
        </el-table-column>
        <el-table-column prop="locate" align="center" label="场馆位置" show-overflow-tooltip></el-table-column>
        <el-table-column sortable width="170px" prop="createTime" align="center" label="申请时间"></el-table-column>
        <el-table-column sortable width="220px" prop="startTime" align="center" label="预约时段">
          <template slot-scope="scope">
            {{scope.row.startTime+"~"+scope.row.endTime.split(' ')[1]}}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          label="预约状态"
          width="176px"
          :filters="statusArr"
          :filter-method="statusFilterHandler"
        >
          <template slot-scope="scope">
            <el-alert :title="scope.row.status | bookStatus(true,statusArr)" :type="scope.row.status | bookStatus(false,statusArr)" show-icon :closable="false" />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区 -->
      <pagination
      ref="pagination"
      @pagination="getPagination"
      :total="parseInt(totalPage)"
      :page="parseInt(searchCondition.page)"
      :limit="parseInt(searchCondition.pageSize)"
      :pageSizes="paginationSize"
      ></pagination>

      <el-dialog v-if="currentRow&&currentRow.status==1" title="入场码" :visible.sync="codeDialogVisible" width="300px" :show-close="false" center>
        <h1 style="color:#409EFF;letter-spacing: 10px;">{{currentRow.code}}</h1>
        <vue-qr :logoSrc="$store.getters.avatar || ''" :text="JSON.stringify({id:currentRow.id,code:currentRow.code})" :size="200"></vue-qr>
      </el-dialog>
  </el-main>
</template>

<script>
import {
  getAllFieldBookApi,
  editBookFieldStatusApi
} from "@/api/fieldBook";
import mySearch from "@/components/MySearch/index";
import pagination from "@/components/Pagination/index";
import clip from '@/utils/clipboard';
import vueQr from 'vue-qr'
  export default {
    components: {  mySearch, pagination,vueQr},
    data(){
      return{
        statusArr:[
          {text: '待支付预约费用', value: 0,type:'info'},
          {text: '待进场使用', value: 1,type:'warning'},
          {text: '已进场使用', value: 2,type:'success'},
          {text: '已取消预约', value: 3,type:'info'},
          {text: '已被管理员撤销', value: 4,type:'info'},
          {text: '未支付费用失效', value: 5,type:'info'},
          {text: '未使用过期失效', value: 6,type:'error'}
        ],
        codeDialogVisible:false,
        fieldBookData:[],
        tableHeight:0,
        currentRow:'',
        searchCondition :{
          no:'',
          name:'',
          uid:this.$store.getters.userId,
          nid:'',
          startTime:'',
          endTime:'',
          page: 1,
          pageSize: 10,
        },
        //分页容量
        paginationSize: [5,10,30,50,100],
        //查询返回 总记录数
        totalPage: 0,
        choiceDateTime:'',
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              const end = new Date(new Date().setHours(23, 59, 59, 59));
              const start = new Date(new Date().setHours(0, 0, 0, 0));
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '未来七天',
            onClick(picker) {
              const end = new Date(new Date().setHours(23, 59, 59, 59));
              const start = new Date(new Date().setHours(0, 0, 0, 0));
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '未来一个月',
            onClick(picker) {
              const end = new Date(new Date().setHours(23, 59, 59, 59));
              const start = new Date(new Date().setHours(0, 0, 0, 0));
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    created(){
      this.getAllFieldBook();
    },
    mounted() {
      this.$nextTick(() => {
        //有页码区就高度多-120
        this.tableHeight = window.innerHeight - 323 - 120;
      })
    },
    methods:{
      //复制订单号
      copyOrderNo(text, event) {
        clip(text, event)
      },
      //传递订单信息
      giveOrdersInfo(){
        this.$emit("getOrdersInfo",this.currentRow)
      },
      //选中的预约信息
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      //撤销提示
      async cancelBook(){
        let confirm = await this.$myconfirm("确定取消预约吗？");
        if (confirm) {
          this.changeStatus(this.currentRow,3);
        }
      },
      //更改预约状态记录
      async changeStatus(row,statusCode){
        let parm ={
          id:row.id,
          oid:row.oid,
          status: statusCode,
          version: row.version
        }
        let res = await editBookFieldStatusApi(parm);
        if(res&&res.code==200){
          this.$message.success(res.msg);
          this.getAllFieldBook();
          this.currentRow = '';
        }
      },
      //日期范围查询
      choiceDate(){
        if(this.choiceDateTime!=null){
          this.searchCondition.startTime = this.choiceDateTime[0];
          this.searchCondition.endTime = this.choiceDateTime[1];
        }else{
          this.searchCondition.startTime = '';
          this.searchCondition.endTime = '';
        }
        this.getAllFieldBook();
      },
      //预约场馆信息查询
      getFieldSearchContent(val){
        this.searchCondition.name = val;
        this.getAllFieldBook();
      },
      //订单号查询
      getSearchContent(val){
        this.searchCondition.no = val;
        this.getAllFieldBook();
      },
      //分页查询getPagination
      getPagination(val){
        this.searchCondition.page = val.page;
        this.searchCondition.pageSize = val.limit;
        this.getAllFieldBook();
      },
      //查询
      async getAllFieldBook(){
        let res = await getAllFieldBookApi(this.searchCondition);
        if(res&&res.code==200){
          this.totalPage = res.data.total;
          this.fieldBookData = res.data.list;
          this.handleCurrentChange();
        }
      },
      cancelRowColor(){
        this.$refs.fieldBookTableRef.setCurrentRow(-1);
      },
      //表格预约状态过滤
      statusFilterHandler(value, row, column){
        const property = column['property'];
        return row[property] === value;
      },
    },
    filters:{
      bookStatus(val,flag,arr){
        if(flag){
          return arr[val].text
        }else{
          return arr[val].type
        }

      },
      showCost(val){
        if(val==0) {
          return '免费'
        }else{
          return val+'元'
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .expandCard{
    padding: 16px 20px 10px 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  ::v-deep .el-dialog__body{
    text-align: center;
  }
</style>
